<style>
.typeahead-demo .custom-popup-wrapper {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 1000;
	display: none;
	background-color: #f9f9f9;
}

.typeahead-demo .custom-popup-wrapper>.message {
	padding: 10px 20px;
	border-bottom: 1px solid #ddd;
	color: #868686;
}

.typeahead-demo .custom-popup-wrapper>.dropdown-menu {
	position: static;
	float: none;
	display: block;
	min-width: 160px;
	background-color: transparent;
	border: none;
	border-radius: 0;
	box-shadow: none;
}
</style>
<div class='container-fluid typeahead-demo'>
	<h4>Static arrays</h4>
	<pre>Model: {{selected | json}}</pre>
	<input type="text" ng-model="selected" uib-typeahead="state for state in states | filter:$viewValue | limitTo:8" class="form-control">

	<h4>ngModelOptions support</h4>
	<pre>Model: {{ngModelOptionsSelected | json}}</pre>
	<input type="text" ng-model="ngModelOptionsSelected" ng-model-options="modelOptions" uib-typeahead="state for state in states | filter:$viewValue | limitTo:8" class="form-control">

	<h4>Custom templates for results</h4>
	<pre>Model: {{customSelected | json}}</pre>
	<input type="text" ng-model="customSelected"
		placeholder="Custom template"
		uib-typeahead="state as state.name for state in statesWithFlags | filter:{name:$viewValue}"
		typeahead-template-url="customTemplate.html" class="form-control"
		typeahead-show-hint="true" typeahead-min-length="0">

	<h4>Custom popup templates for typeahead's dropdown</h4>
	<pre>Model: {{customPopupSelected | json}}</pre>
	<input type="text" ng-model="customPopupSelected"
		placeholder="Custom popup template"
		uib-typeahead="state as state.name for state in statesWithFlags | filter:{name:$viewValue}"
		typeahead-popup-template-url="customPopupTemplate.html"
		class="form-control">
</div>
<script type="text/ng-template" id="customTemplate.html">
  <a>
      <span ng-bind-html="match.label | uibTypeaheadHighlight:query"></span>
  </a>
</script>
<script type="text/ng-template" id="customPopupTemplate.html">
  <div class="custom-popup-wrapper" ng-style="{top: position().top+'px', left: position().left+'px'}" style="display: block;"
     ng-show="isOpen() && !moveInProgress" aria-hidden="{{!isOpen()}}">
    <p class="message">select location from drop down.</p>

    <ul class="dropdown-menu" role="listbox">
      <li class="uib-typeahead-match" ng-repeat="match in matches track by $index" ng-class="{active: isActive($index) }"
        ng-mouseenter="selectActive($index)" ng-click="selectMatch($index)" role="option" id="{{::match.id}}">
        <div uib-typeahead-match index="$index" match="match" query="query" template-url="templateUrl"></div>
      </li>
    </ul>
  </div>
</script>